<template>
  <div class="r-layout">
    <div class="r-header">
      <div class="r-header-content">
        <div class="r-header-box">
          <img class="head-logo" src="~@/assets/img/logo.png"/>
          <div class="head-weather">
            <iframe
              scrolling="no"
              src="https://tianqiapi.com/api.php?style=tz&skin=pitaya"
              frameborder="0"
              width="100%"
              height="20"
              allowtransparency="true" />
          </div>
        </div>
      </div>
    </div>
    <div class="r-content">
      <div class="r-content-box">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
$r-background-image: 'https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg';
$r-media-query: 'screen and (max-width: 1919px) and (min-width: 1441px)';

.r-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 1200px;
  height: 100%;
  min-height: 100vh;
  overflow: auto;
  background-color: #fff;
  background-image: url($r-background-image);
  background-repeat: no-repeat;
  background-size: 1920px auto;
  background-position: center 0;

  .r-content {
    padding: 32px 0;
    flex: 1;
    @media (min-width: 768px) {
      padding: 112px 0 24px;
    }
  }

  .r-header {
    position: fixed; /* 固定头部 */
    top: 0; /* 将头部置于页面顶部 */
    width: 100%; /* 设置头部宽度为100% */
    z-index: 20;
    height: 60px;
    padding: 0;
    background-color: hsla(0, 0%, 100%, .1);
    box-shadow: 0 1px 1px 0 rgba(35, 38, 49, .1);
    backdrop-filter: blur(20px);
    flex: 0 0 auto;

    .r-header-content {
      position: relative;
      height: 100%;
      margin: auto;
      @media #{$r-media-query} {
        padding: 0 80px;
      }

      .r-header-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 60px;
        box-sizing: border-box;

        .head-logo {
          z-index: 21;
          display: flex;
          align-items: center;
          height: 60px;
          margin-right: 24px;
          animation: header-item-searchhide .325s both;
        }

        .head-weather {
          display: flex;
          height: 60px;
          line-height: 60px;
          align-items: center;
          margin-left: auto;
        }
      }
    }
  }

  .r-content {
    padding-top: 60px; /* 在内容上方留出头部高度的空间 */
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    box-sizing: border-box;
    flex: auto;
    background: none;
    @media #{$r-media-query} {
      padding: 60px 80px 0 80px;
    }

    .r-content-box {
      position: relative;
      z-index: 11;
      width: 100%;
      min-width: 100%;
      height: 100%;
      margin-top: 18px;
      background-repeat: no-repeat;
      background-position: 50%;
      box-sizing: border-box;
    }
  }
}

@keyframes header-item-searchhide {
  0% {
    transform: scale(.7);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
    animation-timing-function: cubic-bezier(.2727, .0986, .8333, 1);
  }
}
</style>
